<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- <meta http-equiv="Access-Control-Allow-Origin" content="*"> -->
<meta http-equiv="content-type" content="application/x-www-form-urlencoded">
<!-- 测试一下吧 -->
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" type="text/javascript"></script>
<!-- 几种前端加密方法 -->
<!-- <script src="md5.js" type="text/javascript"></script> --><!-- JqueryMD5，需要借助jquery插件 -->
<script src="JSmd5.js" type="text/javascript"></script><!-- JS MD5 作者：https://blog.csdn.net/k21325 -->
<script src="JSsha1.js" type="text/javascript"></script><!-- JS SHA1 -->
<script src="encryption.js" type="text/javascript"></script><!-- 编码加密 -->
<!-- <script src="tools/src/http/httpClient.js"></script> -->
<!-- <script src="../../../plugin/js/jquery-3.1.1.min.js" type="text/javascript"></script> -->
	<title>人脸属性检测</title>
		<style>
		.hint{
			color:red;
		}
	</style>
</head>
<body>


<div class="container">
	<h3>欢迎使用人脸检测</h3>
	<video width="400" height="300"></video>
	<!-- 图像画布 -->
	<canvas width="200" height="150"></canvas>
	<button id="upload" onclick="DT_register()" class="btn btn-info"><i class="icon-play"></i>&nbsp;MyFace</button>
	<button id="test" onclick="test()">测试使用</button>
	<!-- <button id="genToken" onclick="genToken()">获取token测试</button> -->
	<!-- <button id="snap" class="btn btn-success"><i class="icon-camera"></i>&nbsp;拍个照pian</button> -->
	<span class="hint">测试一下你的Face属性</span>	
</div>
<script type="text/javascript">
  function $(elem){
    return document.querySelector(elem);
  }
 //获取元素
  var canvas = $('canvas'),
    context = canvas.getContext('2d'),
    video = $('video'),
    snap = $('#snap'),
    close = $('#close'),
    upload = $('#upload'),
    uploaded = $('#uploaded'),
    mediaStreamTrack;
  //打开摄像头
  if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
    navigator.mediaDevices.getUserMedia({
      video: true,
    }).then(function(stream) {
      mediaStreamTrack = typeof stream.stop === 'function' ? stream : stream.getTracks()[1];
      video.src = (window.URL || window.webkitURL).createObjectURL(stream);
      video.play();
    });
  }else if (navigator.getMedia) {
    navigator.getMedia({
      video: true
    }, function(stream) {
      mediaStreamTrack = stream.getTracks()[0];
      video.src = (window.URL || window.webkitURL).createObjectURL(stream);
      video.play();
    });
  }



  $("#dfbhd").click(function(){
    
  });

  function DT_register(){
	  	//画出图像
	  	context.drawImage(video, 0, 0, 200, 150);
	  	//获取源数据
	  	var sourceImg = canvas.toDataURL('image/jpg');
	  	//去头获得最后上传数据
	  	var imgCode = sourceImg.substring(22,sourceImg.length);

	  	//请求地址
	  	var url = "https://aip.baidubce.com/rest/2.0/face/v2/detect?";
	  	//token
	  	var reqToken = "24.dd12eb9bdd88967182b8b296da574f89.2592000.1536557284.282335-10180558";
	  	//开始通过jQuery传输图片
  		jQuery.post(url, {
      		// snapData: canvas.toDataURL('image/jpg')		//原来这个小括号里是image/png
      		access_token: reqToken,		//请求token，时效30天
      		image: imgCode,				//图像数据
      		max_face_num: 1,			//最多处理人脸数目
      		face_fields: [age,beauty,expression,faceshape,gender,glasses,landmark,race,qualities]	//请求返回参数
    	}).done(function(result_num) {
        //对结果集进行解析
        	alert("这是结果人脸数"+result_num);
        	var result = JSON.stringify(result_num);
        	alert("111"+result_num)
   		});
  }


  function test(){
  	// context.drawImage(video, 0, 0, 200, 150);
  	// var sourceImg = canvas.toDataURL('image/jpg');	//获取base64
  	// alert("源数据："+sourceImg);
  	// var imgCode = sourceImg.substring(22,sourceImg.length);
  	// alert("截取后"+imgCode);
    //第一种加密方法 
    // var str = EnESCode("LoveYou");
    // alert(str);
    // var str2 = DeESCode(str);
    // alert(str2);

    //jquery的MD5加密
    // var str3 = jQuery.md5("擦的夫妇和阿森纳边吃边玩儿法办法伤心啊换个翻译官方今年暑假工");
    // alert("MD5加密后的字符串：" + str3);
    // jsMD5
    alert("JSmd5加密后："+hex_md5("LoveYou"));
    alert("sha1加密后："+SHA1("LoveYou"));
    alert("sha1加密后小写："+SHA2("LoveYou"));
    //52343e4d65de967559e950092e5b42c9
    //MD5加密后的内容不可解密，只能进行加密后比较
  }

  //生成本次请求token
  function genToken(){
  // 	var url = "https://aip.baidubce.com/oauth/2.0/token?";	//请求地址
  // 	jQuery.post(url, {
  // 		grant_type: 'client_credentials',
  // 		client_id: '',		//API Key
  // 		client_secret: ''	//Secret Key
  // 	}, function(data){
  // 		//结果集
  // 		alert(data);
  // 	},"jsonp");
  	var url = "";
  	// jQuery.ajax( {
  	// 	url: url,
   //      type: "GET",
   //      // contentType: "application/json; charset=utf-8",
   //      dataType: "jsonp",  //指定服务器返回的数据类型
   //      jsonp: "callback",
   //      jsonpCallback: "access_token",
   //      success: function (data) {
   //      	var result = JSON.stringify(data);
   //      	alert(result);
   //      	alert("调用成功");
   //      },
   //      error: function(data){
   //      	var result = JSON.stringify(data);
   //      	alert(result);
   //      	alert("请求超时");
   //      },
   //      callback: function(callback){
   //      	alert("66666");
   //      }
   //  });
   jQuery.getJSON(url,function(data){
   	console.log(data.msg);
   });

  }
</script>
</body>
</html>